<template>
    <MSimpleCard v-if="curTime">
        <view class="m-home-miaosha">
            <image class="m-home-miaosha-img" src="https://z1.ax1x.com/2023/12/01/pirvSDs.png" mode="scaleToFill" />
            <view class="m-home-miaosha-time">
                <view class="m-home-miaosha-time-item"></view>
                <view class="m-home-miaosha-time-item"></view>
                <view class="m-home-miaosha-time-item"></view>
            </view>
            <view @click="more" class="m-home-miaosha-more">
                <text class="m-home-miaosha-more-text">更多</text>
                <uni-icons type="right" color="" size="16" />
            </view>
        </view>
        <scroll-view scroll-x class="m-home-miaosha-product"></scroll-view>
    </MSimpleCard>
</template>

<script lang="ts" setup>
import { ref, shallowRef, computed } from 'vue'
import { getRecentHotSearch } from '@/api/home'
import MSimpleCard from '@/components/common/MSimpleCard.vue'
const props = defineProps<{
    miaosha: MiaoSha
}>()
function more() {
    uni.navigateTo({
        url: props.miaosha.pageUrl
    })
}
const recentHotSearchTags = ref<string[]>()
getRecentHotSearch().then((res) => {
    recentHotSearchTags.value = res.data || []
})
function searchFocus(val: string) {
    uni.navigateTo({ url: '/pages/search/index?val=' + val })
}
const curTime = computed((v) => {
    let now = new Date().getTime()
    return props.miaosha.times
        .sort((v1, v2) => v1.beginTime - v2.beginTime)
        .find((v) => v.beginTime <= now && v.endTime >= now)?.beginTime
})
</script>
<style lang="scss" scoped>
.m-home-miaosha-product {
    white-space: nowrap;
}
.m-home-miaosha-more {
    text-align: right;
    flex-grow: 1;
}
.m-home-miaosha-more-text {
    font-size: $uni-font-size-base;
}
.m-home-miaosha-img {
    width: 150rpx;
    height: 35rpx;
}
.m-home-miaosha {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}
.m-home-miaosha-time-item {
    padding: $uni-spacing-col-sm;
    font-size: $uni-font-size-sm;
    background-color: red;
    margin: 0 $uni-spacing-row-sm;
}
</style>
